<template>
  <el-card shadow="always" :body-style="{ padding: '10px' }">
    <div slot="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>素材管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- card body -->
    <!-- 图片列表过滤和上传操作 -->
    <div class="image_todo">
      <!-- 左侧：过滤=》全部/收藏 -->
      <el-radio-group size="small" v-model="collect" @change="changeCollect">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <!-- 上传按钮 -->
      <el-button
        v-if="!isSel"
        @click="dialogVisible = true"
        type="success"
        size="small"
        >上传图片素材</el-button
      >
      <el-button @click="selOk" v-else type="success" size="small"
        >确定</el-button
      >
    </div>
    <!-- 图片列表 -->
    <el-row :gutter="10">
      <el-col
        v-for="(image, i) in imageList"
        :key="image.id"
        :xs="12"
        :sm="6"
        :md="6"
        :lg="4"
        @click.native="selectImage(image)"
      >
        <!-- 图片 -->
        <div class="img_box">
          <!-- 显示图片 -->
          <el-image :src="image.url" fit="fill"></el-image>
          <!-- 图片操作 -->
          <div class="img_todo">
            <span
              @click="collectImg(image)"
              class="el-icon-star-on"
              :style="{
                color: image.is_collected ? 'rgb(255, 208, 75)' : '#fff',
              }"
            ></span>
            <span @click="delImg(image.id, i)" class="el-icon-delete"></span>
          </div>
          <!-- 显示选中的状态 -->
          <!-- v-if="img.isSelected" -->
          <div class="image-sel" v-if="image.isSelected">
            <i class="el-icon-success"></i>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next,total"
      @current-change="pageChange"
      :page-size="per_page"
      :total="total"
    />

    <!-- 图片上传弹层 -->
    <el-dialog
      append-to-body
      title="图片上传"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- 上传内容区域 -->
      <!--
       API说明：
       action:文件上传的请求地址 =》组件自动发请求上传（没有使用axios）
       on-success事件=》上传接口调用成功会执行这个回调函数
       before-upload事件=》上传接口请求之前会执行=》作用：校验上传文件的格式
       name:上传的文件字段名=>后端提供的
       headers: 设置组件请求的header=>带上token
      -->
      <el-upload
        class="avatar-uploader"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        name="image"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </el-card>
</template>

<script>
// 导入获取图片素材后台方法
import { getImages, collectImg, deleteImage } from '@/api/news'
import { getToken } from '@/utils/store'
export default {
  props: {
    // 是否开启图片选择功能
    isSel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 控制弹层显示隐藏
      dialogVisible: false,
      // 图片列表状态=> true表示收藏图片 / false 全部素材数据
      collect: false,
      // 图片素材列表数据
      imageList: [],
      // 准备分页数据
      // 当前第几页
      page: 1,
      // 每页显示几条数据
      per_page: 12,
      // 图片列表的总数
      total: 0,
      // 上传图片的url
      imageUrl: '',
      // 设置上传请求的header
      headers: {
        Authorization: `Bearer ${getToken().token}`
      },
      // 当前选中的图片
      curSelectImg: ''
    }
  },
  created () {
    this.getImagesList()
  },
  methods: {
    // 确定选择图片
    selOk () {
      this.$emit('selected', this.curSelectImg)
    },
    // 选择模式下：点击图片做选择
    selectImage (img) {
      if (!this.isSel) return
      // img.isSelected = !img.isSelected
      // 重置选择状态
      this.imageList.forEach((item) => (item.isSelected = false))
      // 把当前点击的设置位选中状态（单选）
      img.isSelected = true
      // 存储当前选中图片
      this.curSelectImg = img.url
    },
    // 上传相关方法
    // 上传成功执行
    handleAvatarSuccess (res, file) {
      console.log('2. 上传成功执行:', res)
      // 上传成功显示图片
      this.imageUrl = res.data.url
      // 关闭弹出层和刷新素材列表
      this.dialogVisible = false
      this.getImagesList()
    },
    // 上传之前执行
    beforeAvatarUpload (file) {
      console.log('1. 上传之前执行:', file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 获取图片素材列表
    async getImagesList () {
      // 参数默认可以不传递=》全部
      // eslint-disable-next-line camelcase
      const { per_page, page, collect } = this
      const params = {
        per_page,
        page,
        // 收藏状态
        collect
      }
      const { data } = await getImages(params)
      // 数据总数
      this.total = data.data.total_count
      // 追加选中状态字段
      data.data.results.forEach((item) => (item.isSelected = false))
      // 列表数据
      this.imageList = data.data.results
      console.log(this.imageList)
    },
    // 删除图片
    /**
     * id 当前删除图片ID
     * i 当前删除图片索引
     */
    async delImg (id, i) {
      try {
        // 后端删除
        await deleteImage(id)
        // 前端删除=》删除当前列表项ID的数据
        this.imageList.splice(i, 1)
        this.$message('删除成功！')
      } catch (error) {
        this.$message('删除失败！')
      }
    },
    // 切换图片收藏状态
    /**
     * img :当前点击图片的数据item
     */
    async collectImg (img) {
      /**
       * 1. 获取后台接口相关参数=>is_collected获取当前图片收藏状态=》取反
       * 2. 调用接口
       */
      // eslint-disable-next-line camelcase
      const { id, is_collected } = img
      try {
        // 后台修改
        // eslint-disable-next-line camelcase
        await collectImg(id, !is_collected)
        // 界面刷新=>直接修改当前图片的状态=》局部刷新
        // eslint-disable-next-line camelcase
        img.is_collected = !is_collected
        this.$message('操作成功！')
      } catch (error) {
        console.warn(error)
        this.$message('操作失败！')
      }
    },
    // 状态切换事件
    changeCollect () {
      console.log('状态切换事件', this.collect)
      this.getImagesList()
    },
    // 分页切换事件
    pageChange (e) {
      console.log('当前切换到第', e, '页')
      // 修改页码
      this.page = e
      this.getImagesList()
    }
  }
}
</script>

<style lang="less" scoped>
.image_todo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.el-col {
  margin-bottom: 10px;
}

// 图片列表项
.img_box {
  height: 150px;
  position: relative;
  overflow: hidden;
  .el-image {
    height: 100%;
  }
  &:hover .img_todo {
    // display: flex;
    bottom: 0;
  }
  .img_todo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 30px;
    display: flex;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    // display: none;
    transition: all 0.2s ease;
    cursor: pointer;
    span {
      flex: 1;
      font-size: 18px;
      height: 30px;
      line-height: 30px;
      &:hover {
        background: rgb(7, 148, 241);
      }
    }
  }

  // 图片选择状态样式
  .image-sel {
    position: absolute;
    left: 45%;
    top: 50px;
    font-size: 30px;
    color: #36e736;
  }
}

// 上传组件样式
.avatar-uploader {
  width: 180px;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
